---
title: Seiten
description: Eine Einführung in die Astro-Seiten.
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro';

**Seiten** sind Dateien, die sich im Unterverzeichnis `src/pages/` deines Astro-Projekts befinden. Sie sind verantwortlich für das Routing, das Laden von Daten und das gesamte Seitenlayout für jede HTML-Seite in deiner Website.

## Unterstützte Seitendateien

Astro unterstützt die folgenden Dateitypen im Verzeichnis `src/pages/`:

- [`.astro`](#astro-seiten)
- [`.md`](#markdownmdx-seiten)
- `.mdx` (mit der [MDX-Integration installiert](/de/guides/integrations-guide/mdx/#installation))
- [`.html`](#html-seiten)
- `.js`/`.ts` (als [Endpunkte](/de/guides/endpoints/))

## Dateibasiertes Routing

Astro nutzt eine Routing-Strategie, die **dateibasiertes Routing** genannt wird. Jede Datei in deinem `src/pages/`-Verzeichnis wird anhand ihres Dateipfads zu einem Endpunkt auf deiner Website.

Mit [dynamischen Routing](/de/guides/routing/#dynamic-routes) kann eine einzelne Datei auch mehrere Seiten erzeugen. So kannst du auch dann Seiten erstellen, wenn sich deine Inhalte außerhalb des speziellen `/pages/`-Verzeichnisses befinden, z. B. in einer [Inhaltssammlung](/de/guides/content-collections/) oder einem [CMS](/de/guides/cms/).

<ReadMore>Lies mehr über [Routing in Astro](/de/guides/routing/).</ReadMore>

### Link zwischen Seiten

Schreibe Standard-HTML [`<a>`-Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in deine Astro-Seiten, um Links zu anderen Seiten auf deiner Website zu erstellen. Verwende einen **URL-Pfad relativ zu deiner Root-Domain** als Link, nicht einen relativen Dateipfad.

Um zum Beispiel von einer beliebigen Seite auf `example.com` auf `https://example.com/authors/sonali/` zu verlinken:

```astro title="src/pages/index.astro"
Lies mehr <a href="/authors/sonali/">über Sonali</a>.
```

### Astro-Seiten

Astro-Seiten verwenden die Dateierweiterung `.astro` und unterstützen die gleichen Funktionen wie [Astro-Komponenten](/de/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="de">
  <head>
    <title>Meine Homepage</title>
  </head>
  <body>
    <h1>Willkommen auf meiner Website!</h1>
  </body>
</html>
```

Eine Seite muss ein vollständiges HTML-Dokument erzeugen. Wenn nicht explizit angegeben, fügt Astro die notwendige `<!DOCTYPE html>`-Deklaration und den `<head>`-Inhalt zu jeder `.astro`-Komponente, die sich innerhalb von `src/pages/` befindet, hinzu. Du kannst dieses Verhalten für jede einzelne Komponente deaktivieren, indem du sie als [partielle](#partielle-seiten) Seite markierst.

Um zu vermeiden, dass sich dieselben HTML-Elemente auf jeder Seite wiederholen, kannst du gemeinsame `<head>`- und `<body>`-Elemente in ihre eigenen [Layout-Komponenten](/de/basics/layouts/) verschieben. Du kannst so viele oder so wenige Layout-Komponenten verwenden, wie du möchtest.

```astro {3} /</?MeinLayout>/
---
// src/pages/index.astro
import MeinLayout from '../layouts/MeinLayout.astro';
---
<MeinLayout>
  <p>Mein Seiteninhalt, umgeben von einem Layout!</p>
</MeinLayout>
```

<ReadMore>Lies mehr über [Layout-Komponenten](/de/basics/layouts/) in Astro.</ReadMore>

## Markdown/MDX-Seiten

Astro behandelt auch alle Markdown-Dateien (`.md`) innerhalb von `/src/pages/` als Seiten in deiner finalen Website. Wenn du die [MDX-Integration installiert hast](/de/guides/integrations-guide/mdx/#installation), werden MDX-Dateien (`.mdx`) ebenfalls so behandelt.

:::tip
Ziehe in Erwägung, [Inhaltssammlungen](/de/guides/content-collections/) anstelle von Seiten für Verzeichnisse verwandter Markdown-Dateien zu erstellen, die eine ähnliche Struktur haben, wie z. B. Blogbeiträge oder Produktartikel.
:::

Markdown-Dateien können die spezielle Frontmatter-Eigenschaft `layout` verwenden, um eine [Layout-Komponente](/de/basics/layouts/) zu spezifizieren, welche den Markdown-Inhalt in ein vollständiges `<html>...</html>`-Dokument einbettet.

```md {3}
---
# Beispiel: src/pages/page.md
layout: '../layouts/MeinLayout.astro'
title: 'Meine Markdown-Seite'
---
# Titel

Das hier ist meine Seite, geschrieben in **Markdown.**
```

<ReadMore>Lies mehr über [Markdown](/de/guides/markdown-content/) in Astro.</ReadMore>

## HTML-Seiten

Dateien mit der Dateierweiterung `.html` können im Verzeichnis `src/pages/` abgelegt und direkt als Seiten auf deiner Website verwendet werden. Beachte, dass einige wichtige Astro-Funktionen in [HTML-Komponenten](/de/basics/astro-components/#html-komponenten) nicht unterstützt werden.

## Benutzerdefinierte 404-Fehlerseite

Für eine benutzerdefinierte 404-Fehlerseite kannst du eine Datei namens `404.astro` oder `404.md` in `src/pages` erstellen.

Aus dieser wird die Seite `404.html` erstellt. Die meisten [Hosting-Anbieter](/de/guides/deploy/) werden sie finden und verwenden.

## Benutzerdefinierte 500-Fehlerseite

Um eine benutzerdefinierte 500-Fehlerseite für Seiten anzuzeigen, die [bei Bedarf gerendert](/de/guides/on-demand-rendering/) wird, erstelle die Datei `src/pages/500.astro`. Diese benutzerdefinierte Seite ist nicht für vorgerenderte Seiten verfügbar und kann nicht vorgerendert werden.

Wenn beim Rendern dieser Seite ein Fehler auftritt, wird deinem Besucher die standardmäßige 500-Fehlerseite deines Hosts angezeigt.

<p><Since v="4.10.3" /></p>

Wenn du während der Entwicklung eine `500.astro`-Datei hast, wird der Fehler, der zur Laufzeit auftritt, in deinem Terminal protokolliert und nicht im Fehler-Overlay angezeigt.

### `error`

<p><Since v="4.11.0" /></p>

Die Seite `src/pages/500.astro` ist eine spezielle Seite, die bei jedem Fehler, der während des Renderings auftritt, automatisch eine `error`-Eigenschaft erhält. So kannst du die Details eines Fehlers (z. B. von einer Seite, von der Middleware usw.) verwenden, um deinem Besucher Informationen anzuzeigen.

Der Datentyp der Fehler-Eigenschaft kann beliebig sein, was sich darauf auswirken kann, wie du den Wert in deinem Code einträgst oder verwendest:

```astro title="src/pages/500.astro"
---
interface Props {
    error: unknown
}

const { error } = Astro.props
---

<div>{error instanceof Error ? error.message : 'Unbekannter Fehler'}</div>
```

Um zu vermeiden, dass sensible Informationen beim Anzeigen von Inhalten aus der Eigenschaft `error` durchsickern, solltest du zuerst den Fehler auswerten und dann den entsprechenden Inhalt basierend auf dem Fehler zurückgeben. Du solltest zum Beispiel vermeiden, die gesamte Ursprungsverfolgung des Fehlers anzuzeigen, da sie Informationen darüber enthält, wie dein Code auf dem Server strukturiert ist.

## Partielle Seiten

<p><Since v="3.4.0" /></p>

:::caution
Partielle Seiten sind für die Verwendung in Verbindung mit einer Front-End-Bibliothek wie [htmx](https://htmx.org/) oder [Unpoly](https://unpoly.com/) gedacht. Du kannst sie auch verwenden, wenn du mit dem Schreiben von Low-Level-JavaScript im Frontend vertraut bist. Aus diesem Grund sind sie ein fortgeschrittenes Feature.

Außerdem sollten partielle Seiten nicht verwendet werden, wenn die Komponente Scoped Styles (auf Komponenten begrenzte lokale CSS-Stile) oder Skripte enthält, da diese Elemente aus der HTML-Ausgabe entfernt werden. Wenn du Scoped Styles brauchst, ist es besser, reguläre, nicht-partielle Seiten zusammen mit einer Frontend-Bibliothek zu verwenden, die weiß, wie man den Inhalt in den Head einfügt.
:::

Partielle Seiten sind Seitenkomponenten, die sich in `src/pages/` befinden und nicht als vollständige Seiten dargestellt werden sollen.

Wie Komponenten, die sich außerhalb dieses Ordners befinden, enthalten diese Dateien nicht automatisch die `<!DOCTYPE html>`-Deklaration und auch keinen `<head>`-Inhalt, wie z. B. skalierte Stile und Skripte.

Da sie sich jedoch in dem speziellen Verzeichnis `src/pages/` befinden, ist das erzeugte HTML unter einer URL verfügbar, die dem Dateipfad entspricht. So kann eine Rendering-Bibliothek (z. B. htmx, Stimulus, jQuery) auf dem Client darauf zugreifen und HTML-Abschnitte dynamisch auf eine Seite laden, ohne dass der Browser aktualisiert werden muss oder eine Seitennavigation erforderlich ist.

Partielle Seiten bieten in Kombination mit einer Rendering-Bibliothek eine Alternative zu [Astro-Inseln](/de/concepts/islands/) und [`<script>`-Tags](/de/guides/client-side-scripts/), um dynamische Inhalte in Astro zu erstellen.

Seitendateien, die einen Wert für [`partial`](/de/reference/routing-reference/#partial) exportieren können (z.B. `.astro` und `.mdx`, aber nicht `.md`), können als partielle Dateien markiert werden.

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>Ich bin partiell!</li>
```

### Verwendung mit einer Bibliothek

Partielle Seiten werden verwendet, um einen Abschnitt einer Seite mit einer Bibliothek wie [htmx](https://htmx.org/) dynamisch zu aktualisieren.
Das folgende Beispiel zeigt ein `hx-post`-Attribut, das auf die URL einer partiellen Seite gesetzt ist. Der Inhalt der partiellen Seite wird verwendet, um das gewünschte HTML-Element auf dieser Seite zu aktualisieren.

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>Meine Seite</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Ziel hierher</div>
  
  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Klick mich!
  </button>
</section>
```

Die `.astro`-partielle Seite muss unter dem entsprechenden Dateipfad existieren und einen Export enthalten, der die Seite als partielle Seite definiert:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>Ich wurde angeklickt!</div>
```

In der [htmx-Dokumentation](https://htmx.org/docs/) findest du weitere Details zur Verwendung von htmx.
